<div id="initializr-panel">
  <h2>初始化器</h2>
  <mat-horizontal-stepper [linear]="true">
    <mat-step [stepControl]="firstFormGroup">
      <form [formGroup]="firstFormGroup">
        <ng-template matStepLabel>所属</ng-template>
        <mat-form-field>
          <input matInput placeholder="所属者" formControlName="firstCtrl" [(ngModel)]="owner" required>
        </mat-form-field>
        <div>
          <button mat-button matStepperNext>下一步</button>
        </div>
      </form>
    </mat-step>
    <mat-step [stepControl]="secondFormGroup">
      <form [formGroup]="secondFormGroup">
        <ng-template matStepLabel>项目</ng-template>
        <mat-form-field>
          <input matInput placeholder="项目名称" formControlName="secondCtrl" [(ngModel)]="repo" required>
        </mat-form-field>
        <div>
          <button mat-button matStepperNext>下一步</button>
          <button mat-button matStepperPrevious>上一步</button>
        </div>
      </form>
    </mat-step>
    <mat-step>
      <ng-template matStepLabel>确认</ng-template>
      <p>请确保你有项目“{{owner}}/{{repo}}”的操作权限，并且该项目具有“{{branch}}”分支！</p>
      <div>
        <button mat-raised-button color="primary" (click)="installYkDoc()">开始</button>
        <button mat-button matStepperPrevious>上一步</button>
      </div>
    </mat-step>
  </mat-horizontal-stepper>
  <mat-progress-bar color="primary" mode="determinate" [value]="progress">
  </mat-progress-bar>
  <p>{{message}}</p>
  <a *ngIf="link" href="{{link}}" target="_blank">{{link}}</a>

  <div *ngIf="hasError()" class="table-panel">
    <h2>错误日志：</h2>
    <mat-table #table [dataSource]="dataSource" class="mat-elevation-z8">
      <ng-container matColumnDef="path">
        <mat-header-cell *matHeaderCellDef> 路径 </mat-header-cell>
        <mat-cell *matCellDef="let row"> {{row.path}} </mat-cell>
      </ng-container>
      <ng-container matColumnDef="size">
        <mat-header-cell *matHeaderCellDef> 大小 </mat-header-cell>
        <mat-cell *matCellDef="let row"> {{row.size}} </mat-cell>
      </ng-container>
      <ng-container matColumnDef="state">
        <mat-header-cell *matHeaderCellDef> 状态 </mat-header-cell>
        <mat-cell *matCellDef="let row" class="error-info"> {{row.state}} </mat-cell>
      </ng-container>
      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
      <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
    </mat-table>
  </div>
</div>
